<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/"; %>
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <base href="<%=basePath%>"><title>My JSP 'treeDemo.jsp' starting page</title>
        <script type="text/javascript" src="js/jquery-1.4.2.min.js">
        </script>
        <script type="text/javascript" src="js/jquery.checktree.0.3b1.pack.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("ul.tree").checkTree({        /*
                     // You can add callbacks to the expand, collapse, check, uncheck, and  halfcheck
                     // events of the tree. The element you use as the argument is the LI element of
                     // the object that fired the event.
                     onExpand: function(el) {
                     console.log("expanded ", el.find("label:first").text());
                     },
                     onCollapse: function(el) {
                     console.log("collapsed ", el.find("label:first").text());
                     },
                     onCheck: function(el) {
                     console.log("checked ", el.find("label:first").text());
                     },
                     onUnCheck: function(el) {
                     console.log("un checked ", el.find("label:first").text());
                     },
                     onHalfCheck: function(el) {
                     console.log("half checked ", el.find("label:first").text());
                     }*/
                    /*
                     // You can set the labelAction variable to either "check" or "expand"
                     // to change what happens when you click on the label item.
                     // The default is expand, which expands the tree. Check will toggle
                     // the checked state of the items.
                     labelAction: "expand"
                     */
                    /*
                     // You can also change what happens when you hover over a label (over and out)
                     onLabelHoverOver: function(el) { alert("You hovered over " + el.text()); },
                     onLabelHoverOut: function(el) { alert("You hovered out of " + el.text()); }
                     */
                });
                
                
            });
        </script>
        <link type="text/css" rel="stylesheet" href="css/checktree.css" />
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
    </head>
    <body>
        <div style="margin-left:100px">
            <ul class="tree" style="margin-left: 15px;">
                <li>
                    <input type="checkbox"/>
                    <label id="test">
                        United States
                    </label>
                    <ul>
                        <li>
                            <input type="checkbox" name="geo" value="pennsylvania"/>
                            <label>
                                Pennsylvania
                            </label>
                        </li>
                    </ul>
                </li>
                <li>
                    <input type="checkbox"/>
                    <label>
                        Canadia
                    </label>
                    <ul>
                        <li>
                            <input type="checkbox" name="geo" value="province in canadia"/>
                            <label>
                                Province In Canadia
                            </label>
                        </li>
                    </ul>
                </li>
                <li>
                    <input type="checkbox" name="geo" value="afghanistan"/>
                    <label>
                        Afghanistan
                    </label>
                </li>
                <li>
                    <input type="checkbox"/>
                    <label>
                        Sealand
                    </label>
                    <ul>
                        <li>
                            <input type="checkbox" name="geo" value="tree_city"/>
                            <label>
                                Tree City
                            </label>
                        </li>
                        <li>
                            <input type="checkbox" name="geo" value="oil_province"/>
                            <label>
                                Oil Province
                            </label>
                            <ul>
                                <li>
                                    <input type="checkbox" name="geo" value="oil_city"/>
                                    <label>
                                        Oil City
                                    </label>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <input type="checkbox" value="fun_province_checkbox"/>
                            <label>
                                Fun Province
                            </label>
                            <ul>
                                <li>
                                    <input type="checkbox" name="geo" value="fun_city"/>
                                    <label>
                                        Fun City
                                    </label>
                                </li>
                                <li>
                                    <input type="checkbox" name="geo" value="not_fun_city"/>
                                    <label>
                                        Not Fun City
                                    </label>
                                    <ul>
                                        <li>
                                            <input type="checkbox" name="geo" value="add_one"/>
                                            <label>
                                                add_one
                                            </label>
                                            <ul>
                                                <li>
                                                    <input type="checkbox" name="geo" value="add_two"/>
                                                    <label>
                                                        add_two
                                                    </label>
                                                </li>
                                                <li>
                                                    <input type="checkbox" name="geo" value="add_three"/>
                                                    <label>
                                                        add_three
                                                    </label>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>
